
@import "../../styles/mixin.less";

.keyword{
  width:100%;
  padding:20px;
  .title{
    text-align: center;
    margin:30px 0 100px 0;
    font-size: 32px;
    font-weight: 700;
  }
  .tag-container{
    width:100%;
    height: 600px;
    .tag-content{
      display:flex;
      flex-flow: row wrap;
      justify-content: center;
    }
    .tag-item{
      cursor: pointer;
      margin:10px 20px;
    }
  }
}



.article-list{
  width:100%;
  .item-container {
    padding:10px 20px 0 20px;
    cursor: pointer;
    .inner-container{
      border-bottom:var(--app-border);
      display: flex;
      height:80px;
      align-items: flex-start;
      .item-info{
        width: 400px;
        height: 80px;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        font-weight: 400;
        font-size: 13px;
        line-height: 22px;
        color: #86909c;
        padding-bottom:10px;
        .item-title{
          font-weight: 700;
          font-size: 16px;
          color: #1d2129;
        }
        .item-action{
          .flex();
          width:100%;
          >div{
            width:100px;
            .flex();
          }
          img{
            width:14px;
            height:14px;
            margin-right: 10px;
          }
        }
      }
      .item-pic{
        flex:0 0 100px;
        width:80px;
        height: 79px;
        padding-bottom:10px;
        margin-right: 10px;
        img{
          width:100%;
          height:100%;
        }
      }

      @media only screen and (max-width: 768px) {
        .item-info{
          width:100%!important;
        }
        .item-title{
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width:235px!important;
        }
        .item-detail span{
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          width:235px!important;
        }
      }
    }
  }

  .item-container:hover{
    background-color: rgba(244, 245, 245 , .5);
  }
  
  .no-more{
    text-align: center;
    height:40px;
    text-align: center;
    line-height: 40px;
  }

  .loading{
    width:100%;
    height:40px;
    text-align: center;
    line-height: 40px;
  }
}

